<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>商品详情</title>
    <link rel="stylesheet" href="/css/details.css">
    <link rel="stylesheet" href="/libs/icon/iconfont.css">
</head>
<body>
    <header></header>
    <div class="goods-details" id="goodsDetails">
        <!-- location位置 -->
        
    </div>
    <script type="text/html" id="detailTmplate">
        <div class="location-con">
            <div class="links float_left">
                <a href="/">首页</a>
                <span>
                   >
                </span>
                <p>{{content}}</p>
            </div>
            <div class="share float_right">
                <a href="">
                    <span>分享</span>
                </a>
            </div>
        </div>
    <!-- shopping car购物车 -->
        <div class="sp-car-con">
            <div class="shop-box">
                <div class="left float_left">
                    <div class="depic">
                        <img src="{{imgs[0]}}" class="zoom-image">
                        <div class="imgs">
                            <ul id="gal1">
                                {{each imgs img,index}}
                                <li>
                                    <a href="javascript:;" class="{{index===0? 'zoomGalleryActive':''}}" data-image="{{img}}" data-zoom-image="{{img}}">
                                        <img src="{{img}}" class="smallpic">
                                    </a>
                                </li>
                                {{/each}}
                            </ul>
                        </div>
                    </div>
                </div>
                <div class="right float_right">
                    <h4>{{content}}</h4>
                    <p>{{produce}}
                    </p>
                    <div class="price">
                        <span>¥ {{acPrice}}</span>
                        <span>¥ {{price}}</span>
                    </div>
                    <ul class="shop-info">
                        <li class="info1">
                            <em>促销:</em>
                            <div class="shop-ac">
                                <span>手慢无</span>
                                <span>40元  618超强底价,</span>
                                <span>无门槛</span>
                                <span>领卷</span>
                                <a href="">全部优惠券(4) </a>
                            </div>
                        </li>
                        <li class="info2">
                            <em>颜色 :</em>
                            <div class="shop-kind" id="shop-kind">
                                {{each kinds color,index}}
                                <div class="{{index===0 ? 'kind-box kind-ac' : 'kind-box'}}" id="changeBtn">
                                    {{color}}
                                </div>
                                {{/each}}
                            </div>
                        </li>
                        <li class="info3">
                            <em>数量 :</em>
                            <div class="shop-num">
                                <div class="btn">
                                    <span class="reduce">-</span>
                                    <span class="num">1</span>
                                    <span class="add">+</span>
                                </div>
                            </div>
                        </li>
                        <li class="info4">
                            <em>服务 :</em>
                            <div class="shop-serve">
                                <a href="">
                                    <span>网易自营</span>
                                    <span>满119包邮</span>
                                    <span>商家发货</span>
                                    <span>7天无理由退货</span>
                                </a>
                            </div>
                        </li>
                    </ul>
                    <div class="add-btn">
                        <div class="add-ac float_left" id="buy">立即购买</div>
                        <div class="float_right" id="add-to-cart-btn">
                            <i class="iconfont icon-cart"></i>
                            <span>加入购物车</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="shop-case-con clear_fix">
            <div class="case-left float_left">
                <h4>商品详情</h4>
                <p>{{content}}</p>
                <p>装箱清单：耳机× 1，充电线× 1，说明书× 1。</p>
                {{each bigImgs bigImg}}
                <div class="shop-imgs">
                    <img src="{{bigImg}}" alt="">
                </div>
                {{/each}}
            </div>
            <div class="case-right float_right">
                <h4>热门商品</h4>
                <ul class="case-goodsList" >
                    {{each hotLists hotlist}}
                    <li>
                        <a href="details.html?id={{hotlist.id}}">
                            <img src="{{hotlist.hotImgs}}" alt="">
                            <div class="float_right">
                                <p><span>特价</span>
                                {{hotlist.hotCon}}</p>
                                <span>￥ {{hotlist.hotPrice}}</span>
                            </div>
                        </a>
                    </li>
                    {{/each}}
                </ul>
            </div>
        </div>

    </script>
    <div id="float-box" class="float-box"></div>
    <footer></footer>
    <script src="/libs/require/require.min.js" data-main="/js/details"></script>
</body>
</html>